﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example illustrates the jqxGrid's deferred scrolling feature. In order to enable the feature, set the "scrollmode" property to "deferred".
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
   <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {            
            products = 
            [
                {
                    label: 'Retro Rock T-shirt',
                    pic: 'black-retro-rock-band-guitar-controller.png',
                    price: 15
                },
                {
                    label: 'Lucky T-shirt',
                    pic: 'bright-green-gettin-lucky-in-kentucky.png',
                    price: 18
                },
                {
                    label: 'Loading T-shirt',
                    pic: 'brown-loading-bar-computer-geek.png',
                    price: 25
                },
                {
                    label: 'Cool Story T-shirt',
                    pic: 'cool-story-bro.png',
                    price: 20
                },
                {
                    label: 'The beard T-shirt',
                    pic: 'fear-the-beard.png',
                    price: 17
                },
                {
                    label: 'Don\'t care T-shirt',
                    pic: 'honey-badger-don-t-care.png',
                    price: 19
                },
                {
                    label: 'Guitar T-shirt',
                    pic: 'scott-pilgrim-red-rock-band.png',
                    price: 24
                },
                {
                    label: 'Dodgers T-shirt',
                    pic: '2-sided-dodgers-bankrupt-t-shirt-ash.png',
                    price: 21
                },
                {
                    label: 'Misfits T-shirt',
                    pic: 'misfits-sf-giants-white.png',
                    price: 21
                }
            ];
 
            // prepare the data
            var source =
            {
                datatype: "array",
                datafields: [
                    { name: 'label', type: 'string' },
                    { name: 'pic', type: 'string' },
                    { name: 'price', type: 'number' }
                ],
                localdata: products
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            // create jqxgrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 700,
                height: 380,
                source: dataAdapter,                
                altrows: true,
                sortable: true,
                scrollmode: 'deferred',
                scrollfeedback: function(row)
                {
                    return '<table style="height: 150px;"><tr><td><img src="../../images/t-shirts/' + row.pic + '"/></td></tr><tr><td>' + row.label + '</td></tr></table>';
                },
                rowsheight: 115,
                columns: [
                  {
                      text: 'Image', datafield: 'pic', width: 115, cellsrenderer: function (row, column, value) {
                          return '<img src="../../images/t-shirts/' + value + '"/>';
                      }
                  },
                  {
                      text: 'Title', datafield: 'label', width: 250
                  },
                  {
                      text: 'Price', cellsformat: 'c2', datafield: 'price'
                  }
                ]
            });

        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>
